<template>
    <div>
        <div class="film-item" v-for="(film, index) in list" :key="index" @click=" changePage() ">
            <div class="film-img" :style=" 'background-image: url('+ film.filmImg +')'">
            </div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source" v-if="film.source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">7.9</span>
            </div>
        </div>
    </div>
</template>
<script src="../datas/detail.js"></script>
<script>
    Vue.component("FilmList", {
        template: document.currentScript.ownerDocument.querySelector("template"),
        props: {
            list: {
                type: Array,
                required: true,
            }
        },
        methods: {
            changePage() {
                this.$root.$emit("changePage", "DetailPage")
            }
        },
    })
</script>